<template>
  <section class="qingfenlunjiu">
    <div class="img">
      <img :src="info.imgs" alt="清风论酒" />
    </div>
    <div class="content">
      <div class="name">{{ info.name }}</div>
      <div class="data">
        <div class="top">
          <div class="Rating"><span>Rating:</span>{{ info.rating }}</div>
          <div class="winRate"><span>胜率:</span>{{ info.winRate }}%</div>
          <div class="session"><span>场次:</span>{{ info.sessioned }}</div>
        </div>
        <div class="bottom">
          <div class="rws"><span>RWS:</span>{{ info.RWS }}</div>
          <div class="adr"><span>ADR:</span>{{ info.ADR }}</div>
        </div>
        <div class="remark">
          {{ info.remark }}
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
};
</script>

<style lang="less" scoped>
.qingfenlunjiu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  @media (max-width: 768px) {
    flex-direction: column;
  }

  .img {
    flex: 3;
    height: 400px;

    @media (max-width: 768px) {
      flex: 1;
      height: auto;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 保持图片比例 */
      cursor: pointer;
    }
  }

  .content {
    background-color: #111111;
    flex: 2;
    padding: 20px;
    color: #fff;
    text-align: left;

    @media (max-width: 768px) {
      flex: 1;
    }

    .name {
      font-size: 1.8rem;
      padding: 10px;
      font-weight: 600;
    }

    .data {
      .top,
      .bottom {
        padding: 10px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        @media (max-width: 768px) {
          flex-direction: column;
        }

        div {
          padding-right: 10px;

          @media (max-width: 768px) {
            padding-right: 0;
            padding-bottom: 10px;
          }

          span {
            font-size: 0.8rem;
          }
        }
      }

      .remark {
        padding: 10px;
        font-size: 0.8rem;
        font-weight: 300;
      }
    }
  }
}
</style>